<template>
  <section class="content-view">
    <h2 class="item-title">* 该demo页的整体布局使用 HView/HHeader/HContent</h2>

    <h2 class="item-title">整体结构示意图</h2>

    <div style="width: 375px; height: 667px; transform: scale(0.8); margin: 0 auto; border: 4px dashed #aaa; border-radius: 5px;">
      <HView>
        <HHeader style="border: 4px solid #1F8CEB;"><div slot="center">HHeader</div></HHeader>
        <HContent style="border: 4px solid #4A4A4A; display: flex; justify-content: center; align-items: center;">HContent</HContent>
      </HView>
    </div>

    <h2 class="item-title">开启适配全屏幕的 iOS/iPhoneX 结构示意图</h2>

    <div style="width: 375px; height: 812px; transform: scale(0.8); margin: 0 auto; border: 4px dashed #aaa; border-radius: 5px;" class="a">
      <HView :fullScreen="true">
        <HHeader style="border: 4px solid #1F8CEB;"><div slot="center">HHeader</div></HHeader>
        <HContent style="border: 4px solid #4A4A4A; display: flex; justify-content: center; align-items: center;">HContent</HContent>
      </HView>
    </div>

  </section>
</template>

<script>
import { HView, HHeader, HContent } from '&'

export default {
  components: {
    HView,
    HHeader,
    HContent,
  },
}
</script>
